<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>交叉轴上的多行对齐</title>
    <link rel="stylesheet" type="text/css" href="./css//main.css">
</head>

<body>
    <div>
        <p>
            flex : 交叉轴上的多行对齐<br>
            align-content:只对多行元素有效，会以多行作为整体进行对齐，容器必须开启换行
            <pre>
                    align-content: stretch | flex-start | flex-end | center | space-between | space-around
            </pre>
            必须对父元素设置自由盒属性display:flex，并且设置flex-flow:xxx
            wrap，xxx为主轴方向，<strong>必须设置flex-wrap为wrap</strong>，这样这个属性的设置才会起作用。 <br>
            <ul style="list-style-type: none">
                <li>stretch:默认值，元素被拉伸以适应容器 <br>
                    各行将会伸展以占用剩余的空间，填充方式为给每个项目下方增加空白。第一个项目默认从容器顶端开始排列（如果剩余的空间是负数，该值等效于'flex-start'） </li>
                <li>flex-start: 元素位于容器的开头 <br>
                    各行向起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。</li>
                <li>flex-end: 元素位于容器的结尾 <br>
                    各行向结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行</li>
                <li>center：元素位于容器的中心 <br>
                    各行向中间位置堆叠。取消项目之间的空白并把所有项目垂直居中（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离）
                </li>
                <li>space-between：元素位于各行之间留有空白的容器内 <br>
                    在垂直方向两端对齐，即上面的项目对齐容器顶部，最下面一个项目对齐容器底部。留相同间隔在每个项目之间（如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'）
                </li>
                <li>space-around： 元素上下左右都会留有空白 <br>
                    元素位于各行之前、之间、之后都留有空白的容器内。（如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'）
                </li>
            </ul>
        </p>
    </div>
    <div>
        <p> <strong>align-content:stretch</strong></p>
        <p>默认值,<br>
            当元素没有设置具体尺寸时<br>
            会将容器在交叉轴方向撑满, <br>
            占有的宽度来源于元素的大小</p>
        <div class="container stretch">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
            <div>dddd</div>
            <div>eeee</div>
            <div>ffff</div>
            <div>gggg</div>
        </div>
    </div>
    <div>
        <p><strong>align-content:flex-start</strong></p>
        <p><br><br><br><br></p>
        <div class="container flex-start">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
            <div>dddd</div>
            <div>eeee</div>
            <div>ffff</div>
            <div>gggg</div>
        </div>
    </div>
    <div>
        <p><strong>align-content:flex-end</strong></p>
        <p><br><br><br><br></p>
        <div class="container flex-end">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
            <div>dddd</div>
            <div>eeee</div>
            <div>ffff</div>
            <div>gggg</div>
        </div>
    </div>
    <div>
        <p><strong>align-content:center</strong></p>
        <p><br><br><br><br></p>
        <div class="container center">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
            <div>dddd</div>
            <div>eeee</div>
            <div>ffff</div>
            <div>gggg</div>
        </div>
    </div>
    <div>
        <p><strong>align-content:space-between</strong></p>
        <p><br><br><br><br></p>
        <div class="container space-between">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
            <div>dddd</div>
            <div>eeee</div>
            <div>ffff</div>
            <div>gggg</div>
            <div>hhhh</div>
            <div>iiii</div>
            <div>jjjj</div>
            <div>kkkk</div>
        </div>
    </div>
    <div>
        <p><strong>align-content:space-around</strong></p>
        <p><br><br><br><br></p>
        <div class="container space-around">
            <div>aaaa</div>
            <div>bbbb</div>
            <div>cccc</div>
            <div>dddd</div>
            <div>eeee</div>
            <div>ffff</div>
            <div>gggg</div>
            <div>hhhh</div>
            <div>iiii</div>
            <div>jjjj</div>
            <div>kkkk</div>
        </div>
    </div>
</body>
<style>
    .container {
        display: flex;
        width: 208px;
        height: 208px;
        background-color: aqua;
        flex-flow: row wrap;
    }

    .stretch {
        align-content: stretch;
    }

    .container div {
        /* width: 50px;
        height: 50px; */
        background-color: chocolate;
        border: 1px solid salmon;
    }

    .flex-start {
        align-content: flex-start;
    }

    .flex-end {
        align-content: flex-end;
    }

    .center {
        align-content: center;
    }

    .space-between {
        align-content: space-between;
    }

    .space-around {
        align-content: space-around;
    }

    .flex-start div,
    .flex-end div,
    .center div,
    .space-between div,
    .space-around div {
        width: 50px;
        height: 50px;
        background-color: chocolate;
    }
</style>

</html>